<template>
  <div>
    <div class="mask" ref="mask"></div>
    <div class="mask1" ref="mask1"></div>
    <div class="discount">
      <div class="search">
        <img src="https://cdn.vgn.cn/mini-program/svg/searct_icon.svg" alt="" />
        <input type="search" placeholder="搜索游戏" @click="jump('/search')" />
      </div>
      <!-- <img
      src="https://cdn.vgn.cn/mini-program/svg/mc-background-quadrate.svg"
      alt=""
    />
    <img src="https://cdn.vgn.cn/mini-program/svg/screen.svg" alt="" />
    <img src="https://cdn.vgn.cn/mini-program/svg/loading.svg" alt="" />
    <img
      src="https://cdn.vgn.cn/mini-program/svg/theme/selected-green.svg"
      alt=""
    /> -->
      <div class="sort">
        <ul>
          <li @click="getListBySort('default', $event)" ref="default">
            编辑精选
          </li>
          <li @click="getListBySort('hot', $event)">热门游戏</li>
          <li @click="getListBySort('latest', $event)">最新折扣</li>
          <li @click="getListBySort('expire', $event)">即将过期</li>
          <li @click="getListBySort('discount', $event)">折扣力度</li>
          <li @click="getListBySort('best', $event)">最佳口碑</li>
        </ul>
      </div>
      <div class="tabs clear_fix">
        <div class="only">
          <div class="lowest" ref="lowest">
            <div @click="showLowest">
              <span ref="showLowest">任意折扣</span>
              <span class="arrow">&gt;</span>
            </div>
            <ul ref="lowestUl">
              <li
                @click="getListByOnly('lowest', 0, $event)"
                ref="defaultLowest"
              >
                <span></span>
                <div>任意折扣</div>
              </li>
              <li @click="getListByOnly('lowest', 3, $event)">
                <span></span>
                <div>任意史低</div>
              </li>
              <li @click="getListByOnly('lowest', 1, $event)">
                <span></span>
                <div>历史新低</div>
              </li>
            </ul>
          </div>
          <div class="lang" @click="getListByOnly('lang', 1, $event)">中文</div>
          <div class="wish" @click="getListByOnly('wish', 1, $event)">
            心愿单
          </div>
        </div>
        <div class="filter">
          <div class="header" @click="showFilter">
            筛选<img src="https://cdn.vgn.cn/mini-program/svg/screen.svg" />
          </div>
          <div class="context" ref="context">
            <div class="type">
              <div class="title"><span>分类</span>(支持多选)</div>
              <ul>
                <li
                  v-for="(item, index) in type1"
                  :key="index"
                  @click="setFilter(index, 1, $event)"
                >
                  {{ item }}
                </li>
              </ul>
            </div>
            <div class="type">
              <div class="title"><span>区域</span>(支持多选)</div>
              <ul>
                <li
                  v-for="(item, index) in type2"
                  :key="index"
                  @click="setFilter(index, 2, $event)"
                >
                  {{ item }}
                </li>
              </ul>
            </div>
            <div class="type">
              <div class="title"><span>特色</span>(支持多选)</div>
              <ul>
                <li @click="setFilter(0, 8, $event)">独占</li>
              </ul>
            </div>
            <div class="type">
              <div class="title"><span>额外</span>(支持多选)</div>
              <ul>
                <li @click="setFilter(0, 9, $event)">查看DLC商品</li>
              </ul>
            </div>
            <div class="foot" ref="foot">
              <div class="reset" @click="getListByType('reset')">重置</div>
              <div class="confirm" @click="getListByType('confirm')">确定</div>
            </div>
          </div>
        </div>
      </div>
      <ul class="games">
        <li
          v-for="item in list.data"
          :key="item.spu_id"
          @click="jump(`/gameInfo/${item.spu_id}`)"
        >
          <div class="pic">
            <img :src="item.spu_show_cover" />
            <div class="icon">
              <img
                v-for="(itm, idx) in item.steam_platform"
                :key="idx"
                :src="`https://cdn.vgn.cn/mini-program/svg/system/${
                  itm === 'linux' ? 'windows' : itm
                }_icon.svg`"
              />
            </div>
          </div>
          <div class="content">
            <div class="header">
              <div class="gamename">
                {{ item.game_china_name || item.game_name }}
              </div>
              <div class="inner">
                <div class="score" v-if="item.game_metacritic_score">
                  <img
                    src="https://cdn.vgn.cn/mini-program/svg/mc-background-quadrate.svg"
                  />
                  <span>{{ item.game_metacritic_score }}</span>
                </div>
                <img
                  class="review"
                  :src="item.steam_review ? item.steam_review.icon : ''"
                  :alt="item.steam_review ? item.steam_review.text : ''"
                />
              </div>
            </div>
            <ul class="tag">
              <li v-for="(its, idx) in item.tag" :key="idx">{{ its.name }}</li>
            </ul>
            <div class="foot">
              <div class="price">
                <div class="now_price">
                  {{ item.symbol }}{{ parseInt(item.discount / 100) }}
                </div>
                <div class="origin_price" v-if="item.discount_percent">
                  {{ item.symbol }}{{ parseInt(item.initial / 100) }}
                </div>
              </div>
              <div class="time" v-if="item.discount_percent">
                <h2>-{{ item.discount_percent }}%</h2>
                <p>
                  {{
                  item.discount_end === 0 ||
                  item.discount_end - new Date() / 1000 &lt;= 0
                    ? "暂无期限"
                    : "剩余" +
                      ((item.discount_end - new Date() / 1000) / 3600 >= 24
                        ? parseInt(
                            (item.discount_end - new Date() / 1000) / 3600 / 24
                          ) + "天"
                        : parseInt(
                            (item.discount_end - new Date() / 1000) / 3600
                          ) + "小时")
                  }}
                </p>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <bottom-selector></bottom-selector>
    </div>
  </div>
</template>
<script>
import bottomSelector from "@/components/bottomSelector.vue";
export default {
  components: { bottomSelector },
  data() {
    return {
      type1: [
        "动作",
        "冒险",
        "教育",
        "射击",
        "桌游",
        "模拟",
        "益智",
        "竞速",
        "策略",
        "街机",
        "角色扮演",
        "运动",
        "音乐",
        "第一人称",
        "休闲",
        "多人",
      ],
      type2: ["港区", "美区", "欧区", "日区", "国区"],
      list: {},
      page: 1,
      pageSize: 10,
      sort: "dafault",
      onlyChinese: 0,
      wish: 0,
      onlyLowest: 0,
      filters: [
        {
          type: 1,
          data: [],
        },
        {
          type: 2,
          data: [],
        },
        {
          type: 8,
          data: [],
        },
        {
          type: 9,
          data: [],
        },
      ],
      prev: "",
      lowestPrev: "",
      choosenFilters: new Set(),
    };
  },
  methods: {
    jump(path) {
      this.$router.push(path);
    },
    async getListBySort(sort, e) {
      this.sort = sort;
      this.list = await this.$axios.get(
        `https://api.vgn.cn/steam/promotion?page=${this.page}&pageSize=${
          this.pageSize
        }&sort=${this.sort}&filters=${JSON.stringify(
          this.filters
        )}&onlyChinese=${this.onlyChinese}&wish=${this.wish}&onlyLowest=${
          this.onlyLowest
        }&platform=3`
      );
      if (e.target.innerText === "折扣力度") {
        e.target.parentElement.parentElement.scrollLeft = e.target.clientWidth;
      }
      if (e.target.innerText === "热门游戏") {
        e.target.parentElement.parentElement.scrollLeft = 0;
      }
      if (e.target.innerText === "编辑精选") {
        this.list = await this.$axios.get(
          "https://api.vgn.cn/steam/promotion?page=1&pageSize=10&sort=default&filters=[{%22type%22:0,%22data%22:[3]}]&platform=3"
        );
      }
      this.changePrev(e.target, "prev");
    },
    changePrev(elem, type) {
      switch (type) {
        case "prev":
          if (this.prev) {
            this.prev.className = "";
            this.prev = elem;
          }
          this.prev.className = "active";
          break;
        case "lowestPrev":
          if (this.lowestPrev) {
            this.lowestPrev.className = "";
            this.lowestPrev = elem;
          }
          this.lowestPrev.className = "active";
          break;
      }
    },
    getListByType(type) {
      switch (type) {
        case "reset":
          this.filters.forEach((item) => {
            item.data = [];
          });
          for (let el of this.choosenFilters) {
            el.classList.remove("active");
          }
          this.getList();
          break;
        case "confirm":
          this.getList();
          break;
      }
      this.showFilter();
    },
    setFilter(idx, type, e) {
      switch (type) {
        case 1:
          this.filters[0].data.find((item) => item === idx) === undefined
            ? this.filters[0].data.push(idx)
            : (this.filters[0].data = this.filters[0].data.filter((item) => {
                return item !== idx;
              }));
          break;
        case 2:
          this.filters[1].data.find((item) => item === idx) === undefined
            ? this.filters[1].data.push(idx)
            : (this.filters[1].data = this.filters[1].data.filter((item) => {
                return item !== idx;
              }));
          break;
        case 8:
          this.filters[2].data.length === 0
            ? this.filters[2].data.push(idx)
            : this.filters[2].data.pop(idx);
          break;
        case 9:
          this.filters[3].data.length === 0
            ? this.filters[3].data.push(idx)
            : this.filters[3].data.pop(idx);
          break;
      }
      e.target.classList.toggle("active");
      this.choosenFilters.has(e.target)
        ? this.choosenFilters.delete(e.target)
        : this.choosenFilters.add(e.target);
    },
    async getList() {
      this.list = await this.$axios.get(
        `https://api.vgn.cn/steam/promotion?page=${this.page}&pageSize=${
          this.pageSize
        }&sort=${this.sort}&filters=${JSON.stringify(
          this.filters
        )}&onlyChinese=${this.onlyChinese}&wish=${this.wish}&onlyLowest=${
          this.onlyLowest
        }&platform=3`
      );
    },
    getListByOnly(type, idx, e) {
      switch (type) {
        case "lowest":
          this.onlyLowest = idx;
          e.target.parentElement.classList.toggle("active");
          this.changePrev(e.target.parentElement, "lowestPrev");
          this.showLowest();
          this.getList();
          this.$refs.showLowest.innerText = e.target.innerText;
          if (idx === 0) {
            Object.assign(this.$refs.lowest.style, {
              backgroundColor: "#f5f5f5",
              color: "#858585",
              border: "none",
            });
          } else {
            Object.assign(this.$refs.lowest.style, {
              color: "green",
              border: "1px solid green",
              backgroundColor: "#f1f9ee",
            });
          }
          break;
        case "lang":
          this.onlyChinese = e.target.className === "lang" ? idx : 0;
          e.target.classList.toggle("active");
          this.getList();
          break;
        case "wish":
          this.wish = e.target.className === "wish" ? idx : 0;
          e.target.classList.toggle("active");
          this.getList();
      }
    },
    showLowest() {
      this.$refs.lowestUl.style.top =
        this.$refs.lowestUl.style.top === "" ||
        this.$refs.lowestUl.style.top === "-10rem"
          ? 56 / 37.5 + "rem"
          : "-10rem";
      this.$refs.mask1.classList[1] ? this.showFilter() : "";
      this.$refs.mask.classList.toggle("active");
    },
    showFilter() {
      this.$refs.context.style.top =
        this.$refs.context.style.top === "-10rem" ||
        this.$refs.context.style.top === ""
          ? 56 / 37.5 + "rem"
          : "-10rem";
      this.$refs.foot.style.top =
        this.$refs.foot.style.top === "-10rem" ||
        this.$refs.foot.style.top === ""
          ? 389 / 37.5 + "rem"
          : "-10rem";
      this.$refs.mask.classList[1] ? this.showLowest() : "";
      this.$refs.mask1.classList.toggle("active");
    },
  },
  async created() {
    this.list = await this.$axios.get(
      "https://api.vgn.cn/steam/promotion?page=1&pageSize=10&sort=default&filters=[{%22type%22:0,%22data%22:[3]}]&platform=3"
    );
  },
  mounted() {
    this.$refs.default.className = "active";
    this.$refs.defaultLowest.className = "active";
    this.prev = this.$refs.default;
    this.lowestPrev = this.$refs.defaultLowest;
  },
};
</script>
<style lang="less" scoped>
@import "@/style/index.less";
.discount {
  overflow: hidden;
  .margin(0,15,0,15);
  .padding(0,0,60,0);
  .search {
    .width(176);
    .height(35);
    .line-height(35);
    margin: unit((5/37.5), rem) auto;
    background-color: #f4f5f6;
    border-radius: unit((35/37.5), rem);
    img {
      .width(15);
      .height(15);
      .margin(0,10,0,10);
    }
    input {
      .width(120);
      background-color: #f4f5f6;
      .fontSize(15);
    }
  }
  .sort {
    width: 100%;
    .height(35);
    overflow-x: scroll;
    .margin(15,0,0,0);
    ul {
      width: 120%;
      height: 100%;
      display: flex;
      flex-wrap: nowrap;
      li {
        width: 16.7%;
        .fontSize(14);
        text-align: center;
        color: #9d9d9d;
        .margin(5,0,0,0);
        &.active {
          color: #000;
          border-bottom: unit((2/37.5), rem) solid #000;
        }
      }
    }
  }
  .tabs {
    .margin(15,0,32,0);
    .only {
      float: left;
      display: flex;
      position: relative;
      & > div {
        .padding(6,12,6,12);
        .margin(0,10,0,0);
        background-color: #f5f5f5;
        border-radius: unit((5/37.5), rem);
        color: #858585;
      }
      & > div.active {
        border: unit((1/37.5), rem) solid green;
        color: green;
        background-color: #f1f9ee;
      }
      .lowest {
        div {
          span.arrow {
            display: inline-block;
            transform: rotate(90deg);
            .margin(0,0,0,8);
          }
        }
        ul {
          .width(375);
          position: absolute;
          top: -10rem;
          .left(0);
          z-index: 10;
          transition: top 0.3s linear;
          color: #000;
          background-color: #fff;
          li {
            .fontSize(15);
            position: relative;
            &.active {
              color: green;
              span {
                display: inline-block;
                position: absolute;
                .top(17);
                .width(16);
                .height(16);
                background: url(https://cdn.vgn.cn/mini-program/svg/theme/selected-green.svg)
                  no-repeat;
                background-size: unit((16/37.5), rem);
              }
            }
            div {
              display: inline-block;
              width: 100%;
              .padding(18,0,18,0);
              .margin(0,0,0,26);
              border-bottom: unit((2/37.5), rem) solid #f1f1f1;
            }
            &:last-child {
              div {
                border: none;
              }
            }
          }
        }
      }
    }
    .filter {
      float: right;
      text-align: right;
      color: #717171;
      position: relative;
      .header {
        display: inline-block;
        .fontSize(10);
        .padding(5,0,0,5);
        border-left: unit((1/37.5), rem) solid #f3f3f3;
        img {
          .width(10);
          .height(10);
          .margin(0,15,3,5);
        }
      }
      .context {
        .width(375);
        .height(240);
        text-align: left;
        position: absolute;
        .left(-289);
        top: -10rem;
        z-index: 9;
        overflow: auto;
        background-color: #fff;
        transition: top 0.3s linear;
        .type {
          .margin(35,0,0,0);
          .title {
            .margin(0,0,15,0);
            span {
              color: #000;
              .fontSize(14);
            }
          }
          ul {
            li {
              display: inline-block;
              .width(105);
              .height(30);
              text-align: center;
              .line-height(30);
              border-radius: unit((3/37.5), rem);
              border: unit((1/37.5), rem) solid #f5f5f5;
              background-color: #f5f5f5;
              .margin(0,8,8,0);
              &.active {
                border: unit((1/37.5), rem) solid green;
                color: green;
                background-color: #f1f9ee;
              }
            }
          }
          &:nth-of-type(1) {
            overflow: auto;
            .margin(0,0,0,0);
            ul {
              .width(945);
            }
          }
          &:nth-of-type(2) {
            overflow: auto;
            ul {
              .width(600);
            }
          }
        }
        .foot {
          width: 100%;
          .height(60);
          position: fixed;
          top: -10rem;
          z-index: 10;
          border-top: unit((1/37.5), rem) solid #f5f5f5;
          background-color: #fff;
          transition: top 0.3s linear;
          div {
            display: inline-block;
            .padding(10, 70, 10, 70);
            .margin(14,7,14,0);
            .fontSize(14);
            color: #000;
            border: unit((1/37.5), rem) solid #ededed;
            border-radius: unit((35/37.5), rem);
          }
          .confirm {
            color: #fff;
            background-color: #000;
          }
        }
      }
    }
  }
  ul.games {
    & > li {
      .width(375);
      .height(105);
      position: relative;
      .pic {
        .width(160);
        .height(80);
        display: inline-block;
        position: relative;
        z-index: -1;
        img {
          width: 100%;
          height: 100%;
        }
        .icon {
          position: absolute;
          background-color: rgba(0, 0, 0, 0.6);
          .bottom(2);
          .left(2);
          .padding(2,2,2,2);
          img {
            .width(8);
            .height(8);
            .margin(0,3,0,0);
            &:nth-of-type(3) {
              display: none;
            }
          }
        }
      }
      .content {
        .width(176);
        position: absolute;
        z-index: -1;
        top: 0;
        .left(170);
        display: flex;
        flex-direction: column;
        .header {
          .fontSize(15);
          display: flex;
          align-items: center;
          justify-content: space-between;
          .gamename {
            .width(140);
            .height(16);
            .line-height(16);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .score {
            .width(16);
            .height(16);
            position: relative;
            img {
              width: 100%;
              height: 100%;
            }
            span {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%) scale(0.6);
              color: #fff;
              .fontSize(7);
            }
          }
          img {
            .width(16);
            .height(16);
            .margin(0,2,0,0);
          }
          .inner {
            display: flex;
          }
        }
        ul {
          li {
            display: inline-block;
            .fontSize(12);
            .padding(2,4,2,4);
            .margin(2,5,0,0);
            border: unit((1/37.5), rem) solid #dedede;
            border-radius: unit((2/37.5), rem);
            color: #757575;
          }
        }
        .foot {
          .height(38);
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          .price {
            display: flex;
            align-items: flex-end;
          }
          .now_price {
            color: #52b023;
            .fontSize(14);
            font-weight: 600;
          }
          .origin_price {
            text-decoration: line-through;
            color: #b0b0b0;
            transform: scale(0.6);
          }
          .time {
            color: #fff;
            background-color: #52b023;
            border-radius: unit((6/37.5), rem);
            text-align: center;
            .padding(3,8,3,8);
            h2 {
              .fontSize(10);
              font-weight: 600;
              .margin(0,0,5,0);
            }
            p {
              .fontSize(10);
              transform: scale(0.7);
            }
          }
        }
      }
    }
  }
}
.mask.active {
  width: 100%;
  .height(292);
  position: absolute;
  .bottom(56);
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.6);
}
.mask1.active {
  width: 100%;
  .height(161);
  position: absolute;
  .bottom(56);
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.6);
}
</style>
